<template>
	<div :style="divStyle">
		<el-button type="primary" :size="buttonSize" :plain="buttonPlain" @click.native="ciclkButton()" :style="buttonStyle" :class="buttonClass" :icon="buttonIcon">{{buttonText}}</el-button>
		<!-- 期望时间段选择弹框 -->
		<el-dialog :close-on-click-modal="false" :title="dialogTitle" center :visible.sync="dialogDateRange" width="600px"
			@close="dialogCUClose('dateRangeForm')">
			<el-form ref="dateRangeForm" :model="dateRangeForm" label-width="100px" center size="small">
				<el-row class="margin-top-sm">
					<el-col :span="24">
						<el-form-item label="期望时间段" prop="dateRange">
							<el-col :span="24">
								<el-date-picker :editable="false" :clearable="false" 
									v-model="dateRangeForm.dateRange" type="daterange"
									range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
									format="yyyy年MM月dd日" value-format="yyyy-MM-dd HH:mm:ss"
									:default-time="['00:00:00', '23:59:59']" style="width:100%">
								</el-date-picker>
							</el-col>
						</el-form-item>
						<el-form-item prop="excludeDateRangeIds" v-show="hasExcludeSelect">
							<el-tooltip slot="label" placement="left" content="排斥所选配置的点位">
								<span>排斥点位<i class="el-icon-question"></i></span>
							</el-tooltip>
							<el-select filterable multiple v-model="dateRangeForm.excludeDateRangeIds"
								placeholder="请选择需要排斥的点位配置" style="width:100%">
								<el-option v-for="item in daterangeList" :key="item.id" :label="item.name"
									:value="item.id">
									<span style="float: left">{{ item.name }}</span>
								</el-option>
							</el-select>
							<span class="text-red">将排斥所选配置中的点位</span>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogDateRange=false" size="mini">取 消</el-button>
				<el-button type="primary" @click.native="choosedDateRange()" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		cloneDeep
	} from 'lodash'
	import {
		formatDate
	} from '@/utils/util.js'
	export default {
		name: 'PointPlanSettingPrevChooseDateRange',
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		props: {
			divStyle:{
				type: Object,
				default: () => {}
			},
			dialogTitle:{
				type: String,
				default: '期望时间段'
			},
			buttonText:{
				type: String,
				default: '创建方案'
			},
			buttonStyle:{
				type: Object,
				default: () => {}
			},
			buttonClass:{
				type: Array,
				default: () => []
			},
			buttonIcon:{
				type: String,
				default: ''
			},
			buttonSize:{
				type: String,
				default: 'mini'
			},
			buttonPlain:{
				type: Boolean,
				default: false
			},
			showPrevChooseDateRange:{
				type: Boolean,
				default: true
			},
			hasExcludeSelect: {
				type: Boolean,
				default: false
			},
			daterangeList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				dialogDateRange: false,
				dateRangeForm:{
					dateRange: [formatDate(new Date())+ ' 00:00:00',formatDate(new Date()) + ' 23:59:59'],
					excludeDateRangeIds: [], //需要排斥的点位时间段
				},
			}
		},
		mounted() {
		},
		methods: {
			// 关闭弹窗
			dialogCUClose(formName) {
				const that = this
				switch (formName) {
					case 'dateRangeForm':
						that.$refs['dateRangeForm'].clearValidate()
						break;
				}
			},
			resetDateRangeForm(){
				const that = this;
				//console.log(JSON.parse(JSON.stringify(that.dateRangeForm)));
				that.dateRangeForm = {
					dateRange: [formatDate(new Date())+ ' 00:00:00',formatDate(new Date()) + ' 23:59:59'],
					excludeDateRangeIds: []
				}
			},
			choosedDateRange(){
				const that = this;
				const dateRange = JSON.parse(JSON.stringify(that.dateRangeForm.dateRange))
				const excludeDateRangeIds = JSON.parse(JSON.stringify(that.dateRangeForm.excludeDateRangeIds || []));
				that.resetDateRangeForm();
				that.dialogDateRange = false;
				that.$emit('add-setting', {dateRange, excludeDateRangeIds});
			},
			ciclkButton(){
				const that = this
				if(that.showPrevChooseDateRange){
					// 显示时间段选框
					that.dialogDateRange = true
				}else{
					that.$emit('add-setting')
				}
			}
			
		}
	}
</script>

<style>
</style>
